<template>
    <div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/sf/text.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {
                name1: '展示model里面对应的值',
                name2: `<div style="width: 100px; text-align: center;">
                        <h3>画</h3>
                        <p style="font-size: 12px;">王维</p>
                        <p style="color: #ef5b9c;">远看山有色，</p>
                        <p style="color: #f47920;">近听水无声。</p>
                        <p style="color: #5c7a29;">春去花还在，</p>
                        <p style="color: #7d5886;">人来鸟不惊。</p>
                    </div>`
            },
            schema: {
                properties: {
                    name1: {
                        label: '文本',
                        widget: 'text',
                        ui: {
                            style: {
                                color: 'red'
                            }
                        }
                    },
                    name2: {
                        label: 'innerHTML',
                        widget: 'text',
                        custom: {
                            innerHtml: true
                        }
                    }
                },
                ui: {
                    labelWidth: 100
                },
                col: {
                    span: 12
                }
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
